<template>
	<!-- 场馆 -->
	<view
		class="venue-main"
		:style="{
			backgroundColor: categoryInfo.backgroun_color
		}"
	>
		<view
			class="venue-header"
			:style="{
				height: statusBarHeight + 'px',
				backgroundColor: categoryInfo.backgroun_color
			}"
		></view>
		<view class="venues">
			<!-- 场馆背景图 -->
			<view class="venue-info">
				<image :src="categoryInfo.backgroun_image" mode="aspectFill" style="width: 100%; height: 100%"></image>
			</view>

			<u-sticky offset-top="0" :customNavHeight="statusBarHeight">
				<view
					class="shopClassify_tagsList"
					:style="{
						backgroundColor: categoryInfo.backgroun_color
					}"
				>
					<view class="tagsItem" v-for="(item, index) in categoryList" :key="item.id">
						<view class="tagsName" :class="[isActive == index ? 'tagsDesActive' : '']" @click="changeActive(item, index)">
							{{ item.name }}
						</view>
					</view>
				</view>
			</u-sticky>

			<!-- 场馆商品 -->
			<view class="venue-shop">
				<view class="shopClassify">
					<scroll-view scroll-y class="scrollSty" @scrolltolower="scrolltolowerFnc">
						<view class="shopClassify_shopList" v-if="shopListData.length > 0">
							<hwxcShopItem :shopList="shopListData" shopType="shop" />
						</view>
						<view class="shopNone" v-else>
							<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import hwxcShopItem from '../../components/hwxcShopItem/hwxcShopItem.vue';
import { cloudVenueDetail, homeGoodsList } from '../../api/home/index.js';
import { imageUrl } from '../../utils/tools';
export default {
	data() {
		return {
			// 商品数据
			shopListData: [],
			// 分类
			categoryList: [],
			// 分类下标
			isActive: 0,
			// 场馆详情
			categoryInfo: {},
			// 商品参数
			shopQuery: {
				page: 1,
				limit: 10,
				category_id: '',
				type: '0'
			},
			statusBarHeight: ''
		};
	},

	components: {
		hwxcShopItem
	},

	async onLoad(option) {
		// 获取小程序状态栏高度
		uni.getSystemInfo({
			success: (e) => {
				this.statusBarHeight = e.statusBarHeight;
			}
		});

		const { id } = option;
		await this.getCloudVenueDetail(id);
	},

	methods: {
		// 场馆详情
		async getCloudVenueDetail(id) {
			try {
				const resData = await cloudVenueDetail({
					id
				});
				this.categoryList = resData.data.category;
				let list = resData.data;
				list.backgroun_image = imageUrl(list.backgroun_image);
				this.categoryInfo = list;
				// 根据分类获取商品
				this.shopQuery.category_id = this.categoryList[0]?.id;
				await this.homeGoodsList();
			} catch (e) {
				throw Error(e);
			}
		},

		// 商品数据
		async homeGoodsList(categoryId) {
			try {
				const resData = await homeGoodsList(this.shopQuery);
				if (resData.code == 1) {
					let list = resData.data.data || [];
					const shopListData = [...(this.shopListData || []), ...list];
					shopListData.forEach((item) => {
						item.image = imageUrl(item.fileUrl);
					});
					this.shopListData = shopListData;
				} else {
					uni.showToast({
						title: '获取商品失败',
						icon: 'error'
					});
				}
			} catch (e) {
				throw Error(e);
			}
		},

		// 切换分类
		async changeActive(info, index) {
			this.shopQuery.page = 1;
			this.shopListData = [];
			this.isActive = index;
			this.shopQuery.category_id = info.id;
			await this.homeGoodsList();
		},

		// 触底
		async scrolltolowerFnc() {
			this.shopQuery.page++;
			await this.homeGoodsList();
		}
	}
};
</script>

<style>
page {
	height: 100%;
	display: flex;
	flex-direction: column;
}
</style>

<style scoped lang="scss">
.venue-main {
	flex: 1;
	overflow: scroll;
	background-color: #f3f3f3;
	.venue-header {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 0px 20rpx;
		position: sticky;
		top: 0px;
		left: 0px;
		width: 100%;
		z-index: 999;
	}
	.venue-background {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
	}

	.venues {
		height: 100%;
		.venue-info {
			height: 400rpx;
			width: 100%;
			.info-venueName {
				font-size: 90rpx;
				color: #fff;
				font-weight: bold;
				margin-bottom: 20rpx;
			}

			.btnDes {
				text-align: center;
				background-color: red;
				border-radius: 30rpx;
				height: 60rpx;
				line-height: 60rpx;
				width: 300rpx;
				color: #fff;
			}
		}

		.shopClassify_tagsList {
			display: flex;
			justify-content: space-around;
			align-items: center;
			height: 100rpx;
			box-sizing: border-box;
			border-radius: 24rpx;
			color: #fff;
			.tagsItem {
				flex: 1;
				display: flex;
				align-items: center;
				flex-direction: column;
				margin-bottom: 10rpx;
				.tagsName {
					font-size: 12px;
					font-weight: bold;
					color: #626262;
					box-sizing: border-box;
					padding: 5px 12px;
					border-radius: 5px;
					background-color: #f3f3f3;
				}

				.tagsDesActive {
					background-color: #e43927;
					color: #fff;
				}
			}
		}

		.venue-shop {
			box-sizing: border-box;
			padding: 20rpx;
			padding-top: 0px;
			display: flex;
			flex-direction: column;

			.shopClassify {
				margin: 20rpx 0px;
				display: flex;
				flex-direction: column;
				height: 100%;

				.scrollSty {
					.shopNone {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						box-sizing: border-box;
						padding: 100rpx 0px;
						font-size: 28rpx;
						color: #777;
						.shopNone-image {
							margin-bottom: 40rpx;
							font-size: 28rpx;
						}
					}
				}
			}
		}
	}
}
</style>
